<template>
  <e-dialog ref="dialog" title="" width="800px" :defaultFooter="false">
    <div ref="print" class="print-content">
      <h3><span></span>公司报价单</h3>
      <div class="info">
        <span>客户名称：{{detailData.project && detailData.project.customerName}}</span>
        <span>设计师：{{user && user.account}}</span>
      </div>
      <table border>
        <thead>
          <th>序号</th>
          <th>材料名称</th>
          <th>单位</th>
          <th>数量</th>
          <th>单价</th>
          <th>备注</th>
        </thead>
        <tbody>
          <tr v-for="(item, index) in detailData.projectMaterials" :key="index">
            <td>{{index + 1}}</td>
            <td>{{ item.material && item.material.name }}</td>
            <td>{{ item.material && item.material.units }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.material && item.material.price }}</td>
            <td>{{ item.material && item.material.remark }}</td>
          </tr>
          <tr v-if="!detailData.projectMaterials || detailData.projectMaterials.length == 0">
            <td colspan="6">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <div class="sum">合计：{{total}}元</div>
    </div>
    <div class="print-btn">
      <el-button type="primary" @click="toPrint">打印</el-button>
      <el-button type="default" @click="toCancel">取消</el-button>
    </div>
  </e-dialog>
</template>

<script>
import eDialog from '@/components/dialog';
import storage from '@/utils/storage';
import {findProjectData} from '@/utils/api';

export default {
  components: {eDialog},
  data () {
    return {
      storage,
      user: storage.getItem('user_value'),
      detailData: {},
      total: 0
    }
  },
  methods: {
    openDialog (id) {
      this.detailData = {}
      this.total = 0
      findProjectData({projectId: id}).then((res) => {
        this.detailData = res;
        let num = 0;
        res.projectMaterials.forEach((item) => {
          if (item.material) {
            num = num + (item.material.price * item.quantity);
          }
        })
        this.total = num;
      })
      this.$refs.dialog.openDialog();
    },
    toPrint () {
      this.$print(this.$refs.print)
    },
    toCancel () {
      this.$refs.dialog.closeDialog();
    }
  }
}
</script>

<style lang="scss" scoped>
.print-content {
  width: 100%;
  text-align: center;
  h3 {
    span {
      display: inline-block;
      width: 80px;
      border-bottom: 1px solid #606266;
    }
  }
  .info {
    margin: 10px 0;
    span {
      margin-right: 16px;
    }
  }
  table {
    width: 100%;
    th {
      padding: 8px;
    }

    td {
      padding: 8px;
      text-align: center;
    }
  }
  .sum {
    margin-top: 10px;
    text-align: right;
  }
}
.print-btn {
  margin-top: 20px;
  text-align: center;
}
</style>